<!-- 加载进度条组件 -->
<script lang="ts" setup>
const loadingBar = ref<HTMLDivElement>();
const progress = ref(0);

const timer = ref(0);

const loadingStart = () => {
  const load = loadingBar.value as HTMLDivElement;
  timer.value = window.requestAnimationFrame(function fn() {
    if (progress.value <= 90) {
      progress.value++;
      load.style.width = progress.value + "%";
      timer.value = window.requestAnimationFrame(fn);
    } else {
      progress.value = 0;
      window.cancelAnimationFrame(timer.value);
    }
  });
};

const loadingEnd = () => {
  const load = loadingBar.value as HTMLDivElement;
  progress.value = 100;
  load.style.width = progress.value + "%";
  setTimeout(() => {
    progress.value = 0;
    load.style.width = progress.value + "%";
  }, 100);
};

defineExpose({
  loadingStart,
  loadingEnd,
});
</script>

<template>
  <div ref="loadingBar" class="loadingBar"></div>
</template>

<style lang="scss" scoped>
.loadingBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: orangered;
}
</style>
